<!--暴露4个方法接口
add
detail
modify
delete
-->
<template>
    <section>
        <el-table
                :data="tableData"
                v-auto-height:maxHeight="0"
                :height=maxHeight
                :max-height=maxHeight
        >
            <el-table-column
                    label="序号"
                    type="index">
            </el-table-column>

            <el-table-column v-for="(column, index) in config.tableColumnsInfo" v-bind:key="index"
                             :label="column.label">
                <template slot-scope="scope" >
                    <div slot="reference" class="name-wrapper" v-if="column.isTag">
                        <el-tag size="medium" :type="column.tagType[scope.row[column.prop]] || column.defaultTagType" >{{ scope.row[column.prop] }}</el-tag>
                    </div>
                    <div class="name-wrapper" v-else>
                        {{ scope.row[column.prop] }}
                    </div>
                </template>
            </el-table-column>

            <el-table-column
                    fixed="right"
                    label="操作"
                    width="300">
                <template slot="header">
                    <el-button plain size="small" icon="el-icon-plus" v-if="config.hasAddBtn" @click="addTableData">新增</el-button>
                </template>
                <template slot-scope="scope">
                    <el-button plain size="small" icon="el-icon-view" v-if="config.hasDetailBtn" @click="tableRowDetail(scope.row)">查看详情</el-button>
                    <el-button plain size="small" icon="el-icon-edit" v-if="config.hasModifyBtn" @click="modifyTableRow(scope.row)">修改</el-button>
                    <el-button type="danger" plain size="small" icon="el-icon-delete" v-if="config.hasDeleteBtn" @click="deleteTableRow(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                class="mt-2 block-center"
                @size-change="handlePageSizeChange"
                @current-change="handlePageChange"
                :current-page="PAGINATION.currentPage"
                :page-sizes="PAGINATION.pageSizes"
                :page-size="PAGINATION.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="PAGINATION.total">
        </el-pagination>
    </section>
</template>

<script>
    import paginationMixin from "../../mixins/paginationMixin";
    import TableConfiguration from "../../class/TableConfiguration";

    export default {
        name: "standardizedTable",
        props: {
            url: String,
            config: {
                type: TableConfiguration,
                default:() => {return new TableConfiguration()}
            }
        },
        data() {
            return {
                maxHeight:'',
                tableData: [],
                formData: null
            }
        },
        created() {
            this.loadTableData();
        },
        methods: {
            async loadTableData(params = {}) {
                this.queryParams = params;
                let result = await this.$http.get(this.url,{params:{...this.getParams(),...this.queryParams}});
                this.tableData = result.records;
                this.PAGINATION.total = result.total;
                this.PAGINATION.currentPage = result.current;
            },
            addTableData() {
                this.$emit('add')
            },
            tableRowDetail(row) {
                this.$emit('detail',row)
            },
            modifyTableRow(row) {
                this.$emit('modify',row)
            },
            deleteTableRow(row) {
                this.$emit('delete',row)
            }
        },
        mixins:[paginationMixin]
    }
</script>

<style scoped>

</style>